﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Client Library Sample</title>
    <style type="text/css">
        body
        {
            background: none repeat scroll 0 0 #7FBAA4;
            margin: 0;
            text-align: center;
            font-family: Arial,Helvetica,sans-serif;
        }
        #page_container
        {
            margin: 0 auto;
        }
        #header
        {
            border-bottom: 1px solid #4A4A4A;
            width: 100%;
        }
        #header img
        {
            position: fixed;
            top: 15px;
            left: 15px;
        }
        #header h1, #header h2
        {
            margin: 10px;
        }
        
        .panel_button
        {
            background-color: #487161;
            cursor: pointer;
            right: 1%;
            padding: 5px;
            position: absolute;
            width: 175px;
            z-index: 20;
            -moz-border-radius-bottomright: 10px;
            -webkit-border-bottom-right-radius: 10px;
            -moz-border-radius-bottomleft: 10px;
            -webkit-border-bottom-left-radius: 10px;
        }
        .panel_button img
        {
            vertical-align: middle;
        }
        .panel_button a
        {
            font-size: 20px;
            font-weight: bold;
            text-decoration: none;
            vertical-align: middle;
        }
        .panel_button a:hover
        {
            color: #999999;
        }
        #wrapper
        {
            margin: 0 auto;
            text-align: center;
        }
        #toppanel
        {
            position: absolute;
            top: 0px;
            text-align: center;
            width: 100%;
            z-index: 25;
        }
        #panel
        {
            height: 5px;
            background: #487161;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            text-align: left;
            top: 1px;
            width: 98%;
            z-index: 10;
            -moz-border-radius-bottomleft: 10px;
            -webkit-border-bottom-left-radius: 10px;
        }
        
        #panel h1
        {
            margin: 10px auto;
            width: 350px;
            text-align: center;
        }
        #panel h1 + div
        {
            margin: 5px auto;
            width: 70%;
        }
        
        .panel_contents
        {
            margin: 0 3%;
            width: 40%;
            display: inline-block;
        }
        .panel_contents *
        {
            width: 80%;
        }
        
        #content
        {
            color: #545454;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 30px;
            margin: 0 auto;
            padding-bottom: 30px;
            text-align: justify;
            width: 600px;
        }
        
        #footer p
        {
            color: #333333;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 13px;
        }
        
        input, select
        {
            display: block;
        }
    </style>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <!--<script src="javascript.js" type="text/javascript"></script>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("div.panel_button").click(function () {
                $("div#panel").animate({ height: "500px" }).animate({
                    height: "400px"
                }, "fast");
                $("div.panel_button").toggle();

            });

            $("div#hide_button").click(function () {
                $("div#panel").animate({
                    height: "5px"
                }, "fast");
            });
        });
    </script>
</head>
<body>
    <div id="header">
        <img src="dealmap.png" alt="TheDealmap" />
        <h1>
            Joe's Tropical Fish Resort</h1>
        <h2>
            a.k.a How to use the Dealmap client libraries.</h2>
    </div>
    <div id="page_container">
        <div id="toppanel">
            <div id="panel">
                <h1>
                    Sign up today!</h1>
                <div>
                    <div class="panel_contents">
                        <label for="first">
                            First Name</label>
                        <input type="text" name="first" />
                        <label for="last">
                            Last Name</label>
                        <input type="text" name="last" />
                        <label for="country">
                            Country</label>
                        <input type="text" name="country" />
                        <label for="city">
                            City</label>
                        <input type="text" name="city" />
                        <label for="state">
                            State</label>
                        <input type="text" name="state" />
                    </div>
                    <div class="panel_contents">
                        <label for="activities">
                            What type of activities would you like your coupon to be for?</label>
                        <select multiple="multiple" name="activities">
                            <option value="1">Kids</option>
                            <option value="8">Group</option>
                            <option value="16">Romantic</option>
                            <option value="64">Casual</option>
                            <option value="512">Fun</option>
                            <option value="16384">Latenight</option>
                            <option value="32768">Outdoor</option>
                        </select>
                        <label for="dist">
                            How far do you want to have to travel to get this deal?</label>
                        <input type="text" name="dist" />
                        <label for="desc">
                            In one word, what do you want the coupon to be about?</label>
                        <input type="text" name="desc" />
                    </div>
                </div>
            </div>
            <div class="panel_button" style="display: block;">
                <img src="magnet.png" alt="up" />
                <a href="#">Sign Up</a>
            </div>
            <div class="panel_button" id="hide_button" style="display: none;">
                <img src="magnet_d.png" alt="magnet down" />
                <a href="#">ChaChing!</a>
            </div>
        </div>
        <div id="content">
            <p>
                As a bonus for signing up to our site today we are offering you the chance to receive
                a coupon for a business in your area, that you can use however you want. That's
                right, if you sign up with our affiliate program today you will get a FREE coupon
                to use how ever you wish! And to make things better we'll even let you select from
                the available business and coupons that are on offer in your area.
            </p>
            <p>
                How's that for being a deal hero.</p>
        </div>
    </div>
    <div id="footer">
    </div>
</body>
</html>
